﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--During development turn off caching-->
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />

    <title></title>
    <!-- Office UI Fabric for look and feel. Visit http://dev.office.com/fabric for more info-->
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">



    <!--JQuery-->
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

    <!--Interim Office.js file used during the preview-->
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
    <script>
        // The initialize function must be run each time a new page is loaded
        (function () {
        Office.initialize = function (reason) {
            $(document).ready(function () {
                $("#insertImageButton").click(function (event) {
                    insertImage();
                });
                //
            });
        };

        function insertImage()
        {
            insertPictureAtSelection(getImageAsBase64());
        }

        function insertPictureAtSelection(base64EncodedImageStr) {

            Office.context.document.setSelectedDataAsync(base64EncodedImageStr, {
                coercionType: Office.CoercionType.Image,
                imageLeft: 50,
                imageTop: 50,
                imageWidth: 100,
                imageHeight: 100
            },
               function (asyncResult) {
                   if (asyncResult.status === Office.AsyncResultStatus.Failed) {
                       console.log("Action failed with error: " + asyncResult.error.message);
                   }
               });
        }

        function getImageAsBase64() {
            return ("iVBORw0KGgoAAAANSUhEUgAAAIAAAACABAMAAAAxEHz4AAAAJFBMVEX///9GRkZGRkZGRkZGRkZGRkZGRkZGRkYBpO9/ugDyUCL/uQGm4PjWAAAACHRSTlMBCQ0RFRknMx7uViEAAAB3SURBVGje7dcxCYBQGEXhi6izYBHB0RIiiAXkzW5iAMEKFnCwguVscJd/ecM5Ab79SNHK5FqlZXeNql/XIx23awMAAAAAAAAAAAAAAAAAyBwIvzNJxeyapLZ3Naou1ykNn6sDAAAAAAAAAAAAAAAAAMgcCL9ztB/UhshWs1l/WAAAAABJRU5ErkJggg==");

        }

        })();





    </script>
</head>
<body>
    <button class="ms-Button" id="insertImageButton">
        <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
        <span class="ms-Button-label">Insert Picture</span>
        <span class="ms-Button-description">Insert Picture into Document</span>
    </button>
</body>
</html>
